/* 
1.找接口
2.发送请求
3.将数据遍历


*/

// 渲染封装--------------------------
function ronder() {
    // 1.创建ajax请求
    const xhr = new XMLHttpRequest()
    // 2.请求行
    xhr.open('get', 'localhost:4444/api/getbook')

    // 3.get无请求头  ajax调用
    xhr.send(null)

    // 4.必须请求结束后再返回响应体
    xhr.onload = function () {
        // 获取请求的数据并且转化JSON
        const res = JSON.parse(xhr.responseText)


        if (res.status === 200) {
            // 添加之前要清除
            $('tbody').empty()
            res.data.forEach((obj, index) => {

                // console.log(res)
                const theTr = `<tr>
                                <td>${obj.id}</td>
                                <td>${obj.bookname}</td>
                                <td>${obj.author}</td>
                                <td>${obj.publisher}</td>
                                <td><a href="javascript:;" id=${obj.id} class="btn btn-danger delete">删 除</a></td>
                            </tr>`

                $('tbody').append(theTr)
            });
        }
    }
}

ronder()



// 添加   /api/addbook  ---------------------------------------------------------------------

$('#btnAdd').on('click', () => {
    // console.log(1111)
    const bookname = $('#iptBookname').val().trim()
    const Author = $('#iptAuthor').val().trim()
    const publisher = $('#iptPublisher').val().trim()

    if (bookname === '' || Author === '' || publisher === '') {
        return alert('输入内容不能为空！！！')
    }


    const xhr = new XMLHttpRequest()
    // 2.请求行
    xhr.open('post', 'http://127.0.0.1:4444/api/addbook')

    // 3.默认情况下是form表单格式
    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
    // 3.
    xhr.send(`bookname=${bookname}&author=${Author}&publisher=${publisher}`)


    xhr.onload = function () {
        console.log(xhr.responseText);
        const result = JSON.parse(xhr.responseText)

        // 添加成功
        if (result.status === 201) {
            // 重新渲染
            alert('添加成功！')
            ronder()
            // 渲染页面
            $('#iptBookname').val('')
            $('#iptAuthor').val('')
            $('#iptPublisher').val('')
        } else {
            return alert(`${result.msg}`)
        }
    }


})


// 删除

$('#tb').on('click', 'a', function () {
    ronder()
    const xhr = new XMLHttpRequest()

    const id = $(this).attr('id')
    // 2.请求行
    xhr.open('get', `http://127.0.0.1:4444/api/delbook?id=${id}`)

    // 3.get无请求头  ajax调用
    xhr.send(null)

    xhr.onload = function () {

        const res = JSON.parse(xhr.responseText)

        if (res.id === '1400') {
            return alert('nin')
        }

        if (res.status === 200) {
            alert(`${res.msg}`)
            ronder()
        } else {
            alert(`${res.msg}`)
        }

    }
})